<template>
  <div>
    <div style="display: flex; justify-content: flex-start; margin: 10px">
      <a-button type="primary" @click="editClass(null)" icon="edit"
        >新增文章</a-button
      >
      <a-input-search
        style="margin: 0 0 0 10px"
        placeholder="请输入搜索关键字"
        enter-button="搜索"
        @search="SearchA()"
        v-model="keyword"
      />
    </div>

    <a-table
      bordered
      style="padding-top: 10px"
      :rowSelection="rowSelection"
      :columns="columns"
      :dataSource="dataTable"
      :rowKey="(record, index) => record.articleId"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="operation" slot-scope="text, row, index">
        <a-button size="small" type="primary" @click="seeArticle(row)"
          >查看详情</a-button
        >
        <a-popconfirm
          title="你确定更要删除吗?"
          @confirm="delPlan(row)"
          @cancel="cancel"
          okText="确定"
          cancelText="取消"
        >
          <a-button size="small" type="danger">删除</a-button>
        </a-popconfirm>
      </template>
    </a-table>

    <!-- 弹框 -->
    <div v-if="visibleDetails">
      <a-modal
        :title="modelTitle"
        :visible="visibleDetails"
        @cancel="cancelModel()"
        cancelText="关闭"
        okText="确定"
        :width="700"
        @ok="handleSubmit"
      >
        <a-form :form="formData">
          <a-form-item
            label="文章模块"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-checkbox-group @change="checkboxChange">
              <a-row>
                <a-col :span="8">
                  <a-checkbox value="1"> 大湾区概览 </a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="2"> 政策 </a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="3"> 资助及优惠 </a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="4"> 对接及联络 </a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="5"> 商务支援 </a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="6"> 活动及培训 </a-checkbox>
                </a-col>
                <a-col :span="8">
                  <a-checkbox value="7"> 香港贸发局资讯 </a-checkbox>
                </a-col>
              </a-row>
            </a-checkbox-group>
          </a-form-item>

          <a-form-item
            label="文章语言"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              placeholder="请选择文章语言"
              v-decorator="['language', { initialValue: language }]"
              @change="languageChange"
            >
              <a-select-option value="1">简体中文</a-select-option>
              <a-select-option value="2">繁体</a-select-option>
              <a-select-option value="3">英语</a-select-option>
            </a-select>
          </a-form-item>
          <!------------------------------------------------------------------------- 大湾区概览模块---------------------------------------------------->
          <div v-if="selectOne != ''">
            <a-form-item
              label="大湾区概览"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择模块分类"
                v-decorator="['categoryType', { initialValue: categoryType }]"
                @change="typeChange"
              >
                <a-select-option value="1">大湾区概览</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="大湾区概览内容分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择内容分类"
                v-decorator="[
                  'categoryIds',
                  { initialValue: categoryParentId },
                ]"
                mode="multiple"
                @change="categoryChange"
              >
                <a-select-option
                  v-for="c in categoryIds"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>

            <a-form-item
              label="大湾区概览文章来源"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['source', { initialValue: source }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="大湾区概览文章链接"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input v-decorator="['link', { initialValue: link }]"></a-input>
            </a-form-item>
            <a-form-item
              label="大湾区概览文章标题"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['title', { initialValue: title }]"
              ></a-input>
            </a-form-item>
          </div>
          <!------------------------------------------------------------------------- 大湾区概览模块---------------------------------------------------->

          <!------------------------------------------------------------------------- 政策------------------------------------------------------------->
          <div v-if="selectTwo != ''">
            <a-form-item
              label="政策"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
              v-if="selectTwo != ''"
            >
              <a-select
                placeholder="请选择模块分类"
                v-decorator="['categoryType1', { initialValue: categoryType1 }]"
                @change="typeChange"
              >
                <a-select-option value="2">政策</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="政策内容分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择内容分类"
                v-decorator="[
                  'categoryIds1',
                  { initialValue: categoryParentId },
                ]"
                mode="multiple"
                @change="categoryChange"
              >
                <a-select-option
                  v-for="c in categoryIds1"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>
            <a-form-item
              label="政策文章来源"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['source1', { initialValue: source1 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="政策文章链接"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['link1', { initialValue: link1 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="政策文章标题"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['title1', { initialValue: title1 }]"
              ></a-input>
            </a-form-item>
          </div>
          <!------------------------------------------------------------------------- 政策---------------------------------------------------->

          <!------------------------------------------------------------------------- 资助及优惠---------------------------------------------------->
          <div v-if="selectThree != ''">
            <a-form-item
              label="资助及优惠"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择模块分类"
                v-decorator="['categoryType2', { initialValue: categoryType2 }]"
                @change="typeChange"
              >
                <a-select-option value="3">资助及优惠</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="资助及优惠内容分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
              v-if="selectThree != ''"
            >
              <a-select
                placeholder="请选择内容分类"
                v-decorator="[
                  'categoryIds2',
                  { initialValue: categoryParentId },
                ]"
                mode="multiple"
                @change="categoryChange"
              >
                <a-select-option
                  v-for="c in categoryIds2"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>

            <a-form-item
              label="资助及优惠文章来源"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['source2', { initialValue: source2 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="资助及优惠文章链接"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['link2', { initialValue: link2 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="资助及优惠文章标题"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['title2', { initialValue: title2 }]"
              ></a-input>
            </a-form-item>
          </div>
          <!------------------------------------------------------------------------- 资助及优惠---------------------------------------------------->

          <!------------------------------------------------------------------------- 对接及联络---------------------------------------------------->
          <div v-if="selectFour != ''">
            <a-form-item
              label="对接及联络"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择模块分类"
                v-decorator="['categoryType3', { initialValue: categoryType3 }]"
                @change="typeChange"
              >
                <a-select-option value="4">对接及联络</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="对接及联络内容分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
              v-if="selectFour != ''"
            >
              <a-select
                placeholder="请选择内容分类"
                v-decorator="[
                  'categoryIds3',
                  { initialValue: categoryParentId },
                ]"
                mode="multiple"
                @change="categoryChange"
              >
                <a-select-option
                  v-for="c in categoryIds3"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>

            <a-form-item
              label="对接及联络文章来源"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['source3', { initialValue: source3 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="对接及联络文章链接"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['link3', { initialValue: link3 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="对接及联络文章标题"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['title3', { initialValue: title3 }]"
              ></a-input>
            </a-form-item>
          </div>
          <!------------------------------------------------------------------------- 对接及联络---------------------------------------------------->

          <!------------------------------------------------------------------------- 商务支援---------------------------------------------------->
          <div v-if="selectFive != ''">
            <a-form-item
              label="商务支援"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
              v-if="selectFive != ''"
            >
              <a-select
                placeholder="请选择模块分类"
                v-decorator="['categoryType4', { initialValue: categoryType4 }]"
                @change="typeChange"
              >
                <a-select-option value="5">商务支援</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="商务支援内容分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
              v-if="selectFive != ''"
            >
              <a-select
                placeholder="请选择内容分类"
                v-decorator="[
                  'categoryIds4',
                  { initialValue: categoryParentId },
                ]"
                mode="multiple"
                @change="categoryChange"
              >
                <a-select-option
                  v-for="c in categoryIds4"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>
            <a-form-item
              label="商务支援内容子分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择内容子分类"
                v-decorator="[
                  'categoryChildName',
                  { initialValue: categoryChildId },
                ]"
              >
                <a-select-option
                  v-for="c in categoryChildName"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>

            <a-form-item
              label="商务支援文章来源"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['source4', { initialValue: source4 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="商务支援文章链接"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['link4', { initialValue: link4 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="商务支援文章标题"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['title4', { initialValue: title4 }]"
              ></a-input>
            </a-form-item>
          </div>
          <!------------------------------------------------------------------------- 商务支援------------------------------------------------------>

          <!------------------------------------------------------------------------- 活动及培训---------------------------------------------------->
          <div v-if="selectSix != ''">
            <a-form-item
              label="活动及培训模块分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择模块分类"
                v-decorator="['categoryType5', { initialValue: categoryType5 }]"
                @change="typeChange"
              >
                <a-select-option value="6">活动及培训</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="活动及培训内容分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择内容分类"
                v-decorator="[
                  'categoryIds5',
                  { initialValue: categoryParentId },
                ]"
                mode="multiple"
                @change="categoryChange"
              >
                <a-select-option
                  v-for="c in categoryIds5"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>
            <a-form-item
              label="活动及培训内容子分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择内容子分类"
                v-decorator="[
                  'categoryChildName',
                  { initialValue: categoryChildId },
                ]"
              >
                <a-select-option
                  v-for="c in categoryChildName"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>

            <a-form-item
              label="活动及培训文章来源"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['source5', { initialValue: source5 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="活动及培训文章链接"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['link5', { initialValue: link5 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="活动及培训文章标题"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['title5', { initialValue: title5 }]"
              ></a-input>
            </a-form-item>
          </div>
          <!------------------------------------------------------------------------- 活动及培训---------------------------------------------------->

          <!------------------------------------------------------------------------- 香港贸发局---------------------------------------------------->
          <div v-if="selectSeven != ''">
            <a-form-item
              label="香港贸发局"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择模块分类"
                v-decorator="['categoryType6', { initialValue: categoryType6 }]"
                @change="typeChange"
              >
                <a-select-option value="7">香港贸发局</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item
              label="香港贸发局内容分类"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-select
                placeholder="请选择内容分类"
                v-decorator="[
                  'categoryIds6',
                  { initialValue: categoryParentId },
                ]"
                mode="multiple"
                @change="categoryChange"
              >
                <a-select-option
                  v-for="c in categoryIds6"
                  :key="c.value"
                  :value="c.value"
                  >{{ c.text }}</a-select-option
                >
              </a-select>
            </a-form-item>
            <a-form-item
              label="香港贸发局文章来源"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['source6', { initialValue: source6 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="香港贸发局文章链接"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['link6', { initialValue: link6 }]"
              ></a-input>
            </a-form-item>
            <a-form-item
              label="香港贸发局文章标题"
              :label-col="{ span: 5 }"
              :wrapper-col="{ span: 12 }"
            >
              <a-input
                v-decorator="['title6', { initialValue: title6 }]"
              ></a-input>
            </a-form-item>
          </div>
          <!------------------------------------------------------------------------- 香港贸发局---------------------------------------------------->
          <a-form-item
            label="地区分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <!--  -->
            <a-radio-group v-model="isCityAll">
              <a-radio value="-1">全大湾区</a-radio>
              <a-radio value="1">部分地区</a-radio>
            </a-radio-group>
            <a-select
              v-if="isCityAll != -1"
              v-decorator="['cityIds', { initialValue: cityIdsName }]"
              mode="multiple"
              :size="size"
              placeholder="请选择地区（可多选）"
              style="width: 200px"
              @change="changeCity"
            >
              <a-select-option v-for="c in cityIds" :key="c.value">
                {{ c.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            label="行业分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              placeholder="请选择行业分类"
              v-decorator="['industryIds', { initialValue: parentId }]"
              @change="industryChange"
            >
              <a-select-option key=""> 全部 </a-select-option>
              <a-select-option
                v-for="c in industryIds"
                :key="c.value"
                :value="c.value"
                >{{ c.text }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="行业子分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              v-decorator="['industryChildName', { initialValue: icIds }]"
              mode="multiple"
              :size="size"
              placeholder="请选择行业子分类"
              style="width: 200px"
            >
              <a-select-option
                v-for="c in industryChildName"
                :key="c.value"
                :value="c.value"
              >
                {{ c.text }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
    <!-- 详情弹框 -->
    <a-modal v-model="seeDetails" title="文章详情" :width="700" :footer="null">
      <a-form :form="formData">
        <a-form-item
          label="文章语言"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <span>{{ detail.languageName }}</span>
        </a-form-item>
        <a-form-item
          label="文章类型"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <span>{{ detail.categoryTypeName }}</span>
        </a-form-item>
        <a-form-item
          label="文章分类"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <span>{{ detail.categoryIds }}</span>
        </a-form-item>
        <a-form-item
          label="相关城市"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <span>{{ detail.city }}</span>
        </a-form-item>
        <a-form-item
          label="相关行业"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <span>{{ detail.industry }}</span>
        </a-form-item>
        <a-form-item
          label="文章标题"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <span>{{ detail.title }}</span>
        </a-form-item>
        <a-form-item
          label="来源"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <span>{{ detail.source }}</span>
        </a-form-item>
        <a-form-item
          label="文章链接"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 18 }"
        >
          <span>{{ detail.link }}</span>
        </a-form-item>
        <a-form-item
          label="上传日期"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 18 }"
        >
          <span>{{ detail.createTime }}</span>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 弹框 导出第三方(活动及培训)文章   -->
    <a-modal
      title="导出第三方(活动及培训)文章"
      :visible="visibleExport"
      cancelText="关闭"
      okText="导出"
      @ok="handleExport"
      @cancel="visibleExport = false"
    >
      <div>
        <a-form>
          <a-form-item
            label="温馨提示"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <span>一页最多获取500篇文章</span>
          </a-form-item>
          <a-form-item
            label="语言"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="语言"
              v-model="otherArticleObj.language"
            >
              <a-select-option
                :key="i.otherLanguage"
                v-for="i in otherLanguageList"
                :value="i.otherLanguage"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="请求页"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="请求页"
              v-model="otherArticleObj.offset"
            >
              <a-select-option
                :key="i.offset"
                v-for="i in offsetList"
                :value="i.offset"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>

    <!-- 弹框 筛选   -->
    <a-modal
      title="文章筛选"
      :visible="searchModel"
      cancelText="关闭"
      okText="确定"
      @ok="handelSearch"
      @cancel="searchModel = false"
    >
      <div>
        <a-form>
          <a-form-item
            label="语言"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              style="width: 200px"
              placeholder="语言"
              v-model="searchObj.language"
              @change="searchLanguageChange"
            >
              <a-select-option
                :key="i.language"
                v-for="i in languageList"
                :value="i.language"
              >
                {{ i.name }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="标题/来源"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-input
              v-model="searchObj.title"
              placeholder="请输入文章标题或者文章来源"
            ></a-input>
          </a-form-item>
          <a-form-item
            label="内容分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              v-model="searchObj.categoryId"
              placeholder="请选择内容分类"
            >
              <a-select-option value="0" v-if="languageList.language == '3'"
                >ALL</a-select-option
              >
              <a-select-option value="0" v-else>全部</a-select-option>
              <a-select-option
                v-for="c in searchCategory"
                :key="c.categoryId"
                :value="c.categoryId"
                >{{ c.categoryName }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="地区分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select placeholder="请选择地区分类" v-model="searchObj.cityId">
              <a-select-option value="0">全大湾区</a-select-option>
              <a-select-option
                v-for="c in searchCity"
                :key="c.cityId"
                :value="c.cityId"
                >{{ c.cityName }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="父级行业分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select placeholder="请选择父级分类" @change="searchChild">
              <a-select-option value="0">全部行业</a-select-option>
              <a-select-option
                v-for="c in searchParentIndustry"
                :key="c.industryId"
                :value="c.industryId"
                >{{ c.industryName }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item
            label="子级行业分类"
            :label-col="{ span: 5 }"
            :wrapper-col="{ span: 12 }"
          >
            <a-select
              placeholder="请选择子级分类"
              v-model="searchObj.industryId"
            >
              <a-select-option
                v-for="c in searchChildIndustry"
                :key="c.industryId"
                :value="c.industryId"
                >{{ c.industryName }}</a-select-option
              >
            </a-select>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      title="导出数据"
      :visible="visibleImpor"
      cancelText="关闭"
      okText="导出"
      @ok="handleImpor"
      @cancel="visibleImpor = false"
    >
      <a-radio-group v-model="radioImporValue">
        <a-radio :value="1">勾选数据</a-radio>
        <a-radio :value="2">全部数据</a-radio>
      </a-radio-group>
    </a-modal>
    <a-modal
      title="删除文章"
      :visible="visibleDelAll"
      cancelText="关闭"
      okText="确定"
      @ok="delAllArticle"
      @cancel="visibleDelAll = false"
    >
      <a-radio-group v-model="radioDelValue" :default-value="0">
        <a-radio :value="0">全部</a-radio>
        <a-radio :value="1">简体中文</a-radio>
        <a-radio :value="2">繁体中文</a-radio>
        <a-radio :value="3">英文</a-radio>
      </a-radio-group>
    </a-modal>
  </div>
</template>
<script>
var rowKeys = [];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    rowKeys = selectedRows;
  },
};
import moment from "moment";
import api from "@/api/api.js";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import roleListVue from "../role/roleList.vue";

export default {
  data() {
    return {
      headers: {
        authorization: "authorization-text",
      },
      checkAll: true,
      quantity: 0,
      clicktojudge: [],
      // 搜索框输入的内容
      SearchKeywords: "",
      modelTitle: "",
      size: "default",
      source: "",
      source1: "",
      source2: "",
      source3: "",
      source4: "",
      source5: "",
      source6: "",
      link: "",
      link1: "",
      link2: "",
      link3: "",
      link4: "",
      link5: "",
      link6: "",
      title: "",
      title1: "",
      title2: "",
      title3: "",
      title4: "",
      title5: "",
      title6: "",
      cityIds: [],
      cityIdsName: [],
      categoryIds: [],
      categoryIds1: [],
      categoryIds2: [],
      categoryIds3: [],
      categoryIds4: [],
      categoryIds5: [],
      categoryIds6: [],
      // categoryParentId: "",
      categoryParentId: [],
      categoryChildId: "",
      visibleDetails: false,
      serachVisible: false,
      dataTable: [],
      // -1 全部大湾区  1 部分
      isCityAll: "-1",
      columns: [
        {
          title: "文章标题",
          dataIndex: "title",
          align: "center",
          width: "300px",
        },

        {
          title: "来源",
          dataIndex: "source",
          align: "center",
          width: "400px",
        },
        {
          title: "文章类型",
          dataIndex: "categoryType",
          align: "center",
          customRender: function (text) {
            if (text == "1") {
              return "大湾区概览";
            } else if (text == "2") {
              return "政策";
            } else if (text == "3") {
              return "资助及优惠";
            } else if (text == "4") {
              return "对接及联络";
            } else if (text == "5") {
              return "商务支援";
            } else if (text == "6") {
              return "活动及培训";
            } else if (text == "7") {
              return "香港贸发局";
            }
          },
        },
        {
          title: "上传时间",
          dataIndex: "createTime",
          align: "center",
        },
        {
          title: "语言",
          dataIndex: "language",
          align: "center",
          customRender: function (text) {
            if (text == "1") {
              return "简体中文";
            } else if (text == "2") {
              return "繁体";
            } else if (text == "3") {
              return "英语";
            }
          },
        },
        {
          title: "操作",
          key: "operation",
          dataIndex: "operation",
          width: "300px",
          align: "center",
          scopedSlots: { customRender: "operation" },
        },
      ],
      rowSelection, //表格复选框
      form: {
        size: 10, //每页条数
        page: 1, // 起始页
        language: "",
        categoryType: "",
        categoryId: "",
        cityId: "",
        industryId: "",
        title: "",
      },
      pagination: {
        pageSize: 10,
        total: 0,
        current: 1,
      },
      totalPage: 0,
      formData: this.$form.createForm(this),
      ategoryList: {
        language: "1",
        type: "",
      },
      typeNumber: 0,
      language: "1",
      languageName: "",
      categoryType: "",
      categoryType1: "",
      categoryType2: "",
      categoryType3: "",
      categoryType4: "",
      categoryType5: "",
      categoryType6: "",
      categoryChildName: [],
      industryIds: [],
      industryChildName: [],
      icIds: [],
      seeDetails: false,
      detail: {},
      selectedRowKeys: [],
      param: this.$route.query.params,
      rowData: {},
      parentId: "",
      lang: undefined,

      offset: "",
      otherLanguage: "",
      otherArticleObj: {
        language: "",
        offset: "",
      },
      visibleExport: false,
      otherLanguageList: [
        { otherLanguage: "zh-Hans", name: "简体中文" },
        { otherLanguage: "zh-Hant", name: "繁体中文" },
        { otherLanguage: "en", name: "英文" },
      ],
      offsetList: [
        { offset: "1", name: "1" },
        { offset: "2", name: "2" },
        { offset: "3", name: "3" },
        { offset: "4", name: "4" },
        { offset: "5", name: "5" },
      ],
      languageList: [
        { language: "", name: "全部" },
        { language: "1", name: "简体中文" },
        { language: "2", name: "繁体中文" },
        { language: "3", name: "英文" },
      ],
      searchModel: false,
      searchObj: {
        language: "",
        categoryType: "1",
        categoryId: "",
        cityId: "",
        title: "",
        industryId: "",
      },
      searchCategory: [],
      searchCity: [],
      searchChildIndustry: [],
      searchParentIndustry: [],
      radioImporValue: 1,
      visibleImpor: false,
      visibleDelAll: false,
      radioDelValue: "",
      selectOne: "",
      selectTwo: "",
      selectThree: "",
      selectFour: "",
      selectFive: "",
      selectSix: "",
      selectSeven: "",
      keyword: "",
    };
  },
  methods: {
    moment,
    clearSave() {
      (this.selectOne = ""),
        (this.selectTwo = ""),
        (this.selectThree = ""),
        (this.selectFour = ""),
        (this.selectFive = ""),
        (this.selectSix = ""),
        (this.selectSeven = "");
    },
    clearCheckbox() {
      (this.selectOne = ""),
        (this.selectTwo = ""),
        (this.selectThree = ""),
        (this.selectFour = ""),
        (this.selectFive = ""),
        (this.selectSix = ""),
        (this.selectSeven = "");
    },
    checkboxChange(checkedValues) {
      this.clicktojudge = checkedValues;
      this.clearCheckbox();
      for (let i = 0; i < checkedValues.length; i++) {
        if (checkedValues[i] == 1) {
          this.selectOne = checkedValues[i];
        } else if (checkedValues[i] == 2) {
          this.selectTwo = checkedValues[i];
        } else if (checkedValues[i] == 3) {
          this.selectThree = checkedValues[i];
        } else if (checkedValues[i] == 4) {
          this.selectFour = checkedValues[i];
        } else if (checkedValues[i] == 5) {
          this.selectFive = checkedValues[i];
        } else if (checkedValues[i] == 6) {
          this.selectSix = checkedValues[i];
        } else if (checkedValues[i] == 7) {
          this.selectSeven = checkedValues[i];
        }
      }
    },
    onDelete() {
      let that = this;
      this.$confirm({
        title: "确定要删除模块的文章吗？",
        cancelText: "取消",
        okText: "确定",
        content: <div style="color:red;">删除后不可恢复</div>,
        onOk() {
          that.visibleDelAll = true;
        },
        onCancel() {},
      });
    },
    delAllArticle() {
      let _param = {};
      _param.categoryType = this.form.categoryType;
      if (this.radioDelValue == 0) {
        _param.language = "";
      } else {
        _param.language = this.radioDelValue;
      }
      api.delAllArticle(_param).then((res) => {
        if (res.code == 200) {
          this.visibleDelAll = false;
          this.radioDelValue = "";
          this.$message.success("删除成功");
        }
      });
    },
    clickGetImpor(ype) {
      this.visibleImpor = true;
    },
    handleImpor() {
      let ids = "";
      if (this.radioImporValue == 1) {
        //勾选数据
        if (rowKeys.length == 0) {
          this.$message.info("请选择需要导出的数据");
          return;
        }
        rowKeys.forEach((e) => {
          if (ids == "") {
            ids = e.articleId;
          } else {
            ids = ids + "," + e.articleId;
          }
        });
      } else {
        if (this.dataTable.length == 0) {
          this.$message.info("没有数据可以导出哦~");
          return;
        }
      }
      let path =
        api.HOST + "/article/exportArticle?ids=" + ids + "&categoryType=1";
      window.open(path);
    },
    onChangeDay(date, dateString) {}, //选择时间
    search() {
      this.searchModel = true;
    },
    // 搜索按钮
    SearchA() {
      if (this.keyword) {
        this.form.title = this.keyword;
      }
      console.log(this.form);
      this.getPlan();
    },
    // 搜索按钮的回调
    handelSearch() {
      this.searchModel = false;
      // 页码
      this.pagination.current = 1;
      // 语言
      this.form.language = this.searchObj.language;
      // 请选择内容分类
      this.form.categoryId = this.searchObj.categoryId;
      // 请选择地区分类
      this.form.cityId = this.searchObj.cityId;
      // 请选择子级分类
      this.form.industryId = this.searchObj.industryId;
      // 请输入文章标题或者文章来源
      this.form.title = this.searchObj.title;
      this.getPlan();
    },
    searchLanguageChange() {
      api
        .getNotAll({
          type: 1,
          language: this.searchObj.language,
        })
        .then((res) => {
          if (res.code == 200) {
            this.searchCategory = res.result;
          }
        });
      api
        .getCityList({
          language: this.searchObj.language,
        })
        .then((res) => {
          if (res.code == 200) {
            this.searchCity = res.result;
          }
        });
      api
        .getParentIndustryList({
          language: this.searchObj.language,
        })
        .then((res) => {
          if (res.code == 200) {
            this.searchParentIndustry = res.result;
          }
        });
    },
    searchChild(value) {
      if (value != 0) {
        api
          .getIndustryList({
            language: this.searchObj.language,
            parentId: value,
          })
          .then((res) => {
            if (res.code == 200) {
              this.searchChildIndustry = res.result;
            }
          });
      } else {
        this.searchChildIndustry = [];
      }
    },
    // 页码
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination);
      this.pagination.current = pagination.current;
      this.getPlan();
    },
    exportOtherArticle() {
      this.visibleExport = true;
      this.clearOther();
    },
    handleExport() {
      this.visibleExport = false;
      this.otherlanguage = this.otherArticleObj.language;
      this.offset = this.otherArticleObj.offset;
      if (this.otherlanguage == "" || this.offset == "") {
        this.$message.error("请先选择导出文章的参数");
      } else {
        let path =
          api.HOST +
          "/article/exportOtherArticle?language=" +
          this.otherlanguage +
          "&offset=" +
          this.offset;
        window.open(path);
      }
    },
    batchDel() {
      let that = this;
      this.$confirm({
        title: "确认是否删除",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          that.delArticle();
        },
      });
    },
    delArticle() {
      let idsStr = "";
      if (rowKeys.length > 0) {
        rowKeys.forEach((e) => {
          if (idsStr) {
            idsStr += "," + e.articleId;
          } else {
            idsStr = e.articleId;
          }
        });
      } else {
        this.$message.info("请选择需要删除的数据");
        return;
      }
      api.delArticle({ ids: idsStr }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.selectedRowKeys = [];
          this.getPlan();
        } else {
          this.$message.info(res.description);
        }
      });
    },
    cancelModel() {
      this.typeNumber = 0;
      this.visibleDetails = false;
    },
    seeArticle(val) {
      this.seeDetails = true;
      api.getArticle({ articleId: val.articleId }).then((res) => {
        if (res.code == 200) {
          let data = res.result;
          let str = "";
          let industry = "";
          let category = "";
          let cityArray = Array.from(data.city);
          cityArray.forEach((ele) => {
            str += ele.cityName + ",";
          });
          str = str.substr(0, str.length - 1);
          data.city = str;
          let industryArray = Array.from(data.industry);
          industryArray.forEach((ele) => {
            industry += ele.industryName + ",";
          });
          industry = industry.substr(0, industry.length - 1);
          data.industry = industry;
          let categoryyArray = Array.from(data.category);
          categoryyArray.forEach((ele) => {
            category += ele.categoryName + ",";
          });
          category = category.substr(0, category.length - 1);
          data.categoryIds = category;
          this.detail = data;
          console.log(data);
        }
      });
    },
    languageChange(values) {
      this.ategoryList.language = values;
      this.language = values;
      this.formData.setFieldsValue({
        // categoryType: "",
        // categoryIds: "",
        // categoryChildName: "",
        cityIds: [],
        industryIds: [],
        industryChildName: [],
        source: "",
      });
      this.getCityList();
      this.getParentIndustryList();
    },

    languageChanges(values) {
      this.form.language = values;
      this.pagination.current = 1;
      this.getPlan();
    },
    typeChange(values, row) {
      this.ategoryList.type = values;
      this.typeNumber = values;
      this.categoryIds = [];
      this.categoryIds1 = [];
      this.categoryIds2 = [];
      this.categoryIds3 = [];
      this.categoryIds4 = [];
      this.categoryIds5 = [];
      this.categoryIds6 = [];
      api.getCategoryList(this.ategoryList).then((res) => {
        if (res.code == 200) {
          res.result.forEach((r) => {
            this.categoryIds.push({
              value: r.categoryId,
              text: r.categoryName,
            });
            this.categoryIds1.push({
              value: r.categoryId,
              text: r.categoryName,
            });
            this.categoryIds2.push({
              value: r.categoryId,
              text: r.categoryName,
            });
            this.categoryIds3.push({
              value: r.categoryId,
              text: r.categoryName,
            });
            this.categoryIds4.push({
              value: r.categoryId,
              text: r.categoryName,
            });
            this.categoryIds5.push({
              value: r.categoryId,
              text: r.categoryName,
            });
            this.categoryIds6.push({
              value: r.categoryId,
              text: r.categoryName,
            });
          });
          if (row.category) {
            this.categoryChange(this.categoryParentId, row);
          }
        }
      });
    },
    industryChange(val, row) {
      this.industryChildName = [];
      api.getIndustryList({ parentId: val }).then((res) => {
        if (res.code == 200) {
          res.result.forEach((r) => {
            this.industryChildName.push({
              value: r.industryId,
              text: r.industryName,
            });
          });
          if (row.industry) {
            var arr = [];
            row.industry.forEach((r) => {
              arr.push(r.industryId);
            });
            this.formData.setFieldsValue({
              industryChildName: arr,
            });
          }
        }
      });
    },
    categoryChange(val, row) {
      this.formData.setFieldsValue({
        categoryChildName: [],
      });
      this.categoryChildName = [];
      if (this.typeNumber == 5 || this.typeNumber == 6) {
        api
          .getChildList({ language: this.language, categoryId: val })
          .then((res) => {
            if (res.code == 200) {
              res.result.forEach((r) => {
                this.categoryChildName.push({
                  value: r.categoryId,
                  text: r.categoryName,
                });
              });
            }
            if (row) {
              var arr = [];
              row.category.forEach((r) => {
                arr.push(r.categoryId);
              });
              this.formData.setFieldsValue({
                categoryChildName: arr,
              });
            }
          });
      }
    },
    cancel(e) {
      this.$message.error("取消!");
    },
    tableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.getPlan();
    },
    onSearch() {
      this.$router.push("searchArticleList");
    },
    // 筛选
    getPlan() {
      this.form.page = this.pagination.current;
      api.getArticlePage(this.form).then((res) => {
        if (res.code == 200) {
          this.pagination.total = res.result.totalCount;
          this.dataTable = res.result.content;
        }
      });
    },
    // 搜索的方法
    async getPlanA() {
      this.form.page = this.pagination.current;
      // 语言 页码 输入的内容
      let res = await api.getArticlePage({
        language: this.form.language,
        current: this.pagination.current,
        SearchKeywords: this.SearchKeywords,
      });
      console.log(res);
      // if (res.code == 200) {
      //   this.pagination.total = res.result.totalCount;
      //   this.dataTable = res.result.content;
      //   console.log(this.pagination.tota,this.dataTable);
      // }
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
      console.info(this.selectedRowKeys);
    },
    // 新增
    editClass(row) {
      this.selectOne = "";
      this.selectTwo = "";
      this.selectThree = "";
      this.selectFour = "";
      this.selectFive = "";
      this.selectSix = "";
      this.selectSeven = "";

      this.cityIds = [];
      this.cityIdsName = [];
      this.icIds = [];
      this.categoryIds = [];
      this.categoryIds1 = [];
      this.categoryIds2 = [];
      this.categoryIds3 = [];
      this.categoryIds4 = [];
      this.categoryIds5 = [];
      this.categoryIds6 = [];
      this.categoryType = undefined;
      this.categoryType1 = undefined;
      this.categoryType2 = undefined;
      this.categoryType3 = undefined;
      this.categoryType4 = undefined;
      this.categoryType5 = undefined;
      this.categoryType6 = undefined;
      this.industryIds = [];
      this.parentId = "";
      // 创建form实例的方法
      this.formData = this.$form.createForm(this);
      this.title = "";
      this.title1 = "";
      this.title2 = "";
      this.title3 = "";
      this.title4 = "";
      this.title5 = "";
      this.title6 = "";
      this.link = "";
      this.link1 = "";
      this.link2 = "";
      this.link3 = "";
      this.link4 = "";
      this.link5 = "";
      this.link6 = "";
      this.source = "";
      this.source1 = "";
      this.source2 = "";
      this.source3 = "";
      this.source4 = "";
      this.source5 = "";
      this.source6 = "";
      this.categoryParentId = [];
      this.parentId = "";
      if (row) {
        console.log(row);
        this.ategoryList.language = row.language;
        this.language = row.language;
        if (row.industry[0].parentId) {
          this.parentId = row.industry[0].parentId;
          this.industryChange(this.parentId, row);
        } else {
          this.parentId = "";
          this.icIds = [];
        }
        if (row.city.length != 0) {
          row.city.forEach((ele) => {
            if (ele.cityId) {
              this.isCityAll = "1";
              this.cityIdsName.push(ele.cityId);
            } else {
              this.cityIdsName = [];
              this.isCityAll = "-1";
            }
          });
        }
        if (row.category.length != 0) {
          row.category.forEach((ele) => {
            if (ele.categoryId) {
              this.categoryParentId.push(ele.categoryId);
            } else {
              this.categoryParentId = [];
            }
          });
        }
      }
      if (row == null) {
        this.modelTitle = "新增文章";
      } else {
        this.modelTitle = "修改文章";
        this.language = row.language + "";

        this.categoryType = row.categoryType + "";
        this.typeChange(this.categoryType, row);

        this.title = row.title;
        this.link = row.link;
        this.source = row.source;
        this.rowData = row;
      }
      this.getCityList();
      this.getParentIndustryList();
      this.visibleDetails = true;
    },

    // 地区分类列表
    getCityList() {
      api.getCityList({ language: this.language }).then((res) => {
        if (res.code == 200) {
          this.cityIds = [];
          res.result.forEach((r) => {
            this.cityIds.push({
              value: r.cityId,
              text: r.cityName,
            });
          });
        }
      });
    },
    // 行业分类列表
    getParentIndustryList() {
      api.getParentIndustryList({ language: this.language }).then((res) => {
        if (res.code == 200) {
          this.industryIds = [];
          res.result.forEach((r) => {
            this.industryIds.push({
              value: r.industryId,
              text: r.industryName,
            });
          });
        }
      });
    },
    changeCity(e) {
      let id = [];
      e.forEach((element) => {
        if (element == -1) {
        }
      });
      this.cityIdsName = e;
    },

    delPlan(row) {
      api.delArticle({ ids: row.articleId }).then((res) => {
        if (res.code == 200) {
          this.getPlan();
        }
      });
    },
    // 新增文章的确定按钮的回调
    handleSubmit() {
      // values 表单输入的数据
      this.formData.validateFields((err, values) => {
        let aa = "";
        if (this.typeNumber == 5 || this.typeNumber == 6) {
          values.categoryIds = values.categoryChildName;
        }
        let industryChildName = values.industryChildName,
          industryIds = "";
        let cityIds = "";
        for (let index = 0; index < industryChildName.length; index++) {
          if (industryIds == "") {
            industryIds = industryChildName[index];
          } else {
            industryIds += "," + industryChildName[index];
          }
        }
        for (let index = 0; index < this.cityIdsName.length; index++) {
          if (cityIds == "") {
            cityIds = this.cityIdsName[index];
          } else {
            cityIds += "," + this.cityIdsName[index];
          }
        }
        values.industryIds = industryIds;
        values.cityIds = cityIds;

        this.$delete(values, "categoryChildName");
        this.$delete(values, "industryChildName");
        if (this.modelTitle == "修改文章") {
          values.articleId = this.rowData.articleId;
        }
        if (this.isCityAll == -1) {
          values.cityIds = "";
        }
        if (values != undefined) {
          //  文章信息
          let jsonInfo = [
            {
              //  文章类型分类
              categoryType: "",
              // 内容分类
              categoryIds: "",
              // 标题
              title: "",
              // 来源
              source: "",
              // 文章链接
              link: "",
            },
            {
              //  文章类型分类
              categoryType: "",
              // 内容分类
              categoryIds: null,
              // 标题
              title: "",
              // 来源
              source: "",
              // 文章链接
              link: "",
            },
            {
              //  文章类型分类
              categoryType: "",
              // 内容分类
              categoryIds: null,
              // 标题
              title: "",
              // 来源
              source: "",
              // 文章链接
              link: "",
            },
            {
              //  文章类型分类
              categoryType: "",
              // 内容分类
              categoryIds: null,
              // 标题
              title: "",
              // 来源
              source: "",
              // 文章链接
              link: "",
            },
            {
              //  文章类型分类
              categoryType: "",
              // 内容分类
              categoryIds: null,
              // 标题
              title: "",
              // 来源
              source: "",
              // 文章链接
              link: "",
            },
            {
              //  文章类型分类
              categoryType: "",
              // 内容分类
              categoryIds: null,
              // 标题
              title: "",
              // 来源
              source: "",
              // 文章链接
              link: "",
            },
            {
              //  文章类型分类
              categoryType: "",
              // 内容分类
              categoryIds: "",
              // 标题
              title: "",
              // 来源
              source: "",
              // 文章链接
              link: "",
            },
          ];
          // 文章模块
          let checkedValues = this.clicktojudge;
          //  文章信息
          for (let i = 0; i < checkedValues.length; i++) {
            if (checkedValues[i] == 1) {
              // 文章类型分类
              values.categoryType != undefined
                ? (jsonInfo[0].categoryType = "1")
                : "";
              // 内容分类
              values.categoryIds != undefined
                ? (jsonInfo[0].categoryIds = values.categoryIds)
                : "";
              // 标题 title
              values.title != undefined
                ? (jsonInfo[0].title = values.title)
                : "";
              // 来源 source
              values.source != undefined
                ? (jsonInfo[0].source = values.source)
                : "";
              // 文章链接 link
              values.link != undefined ? (jsonInfo[0].link = values.link) : "";
            } else if (checkedValues[i] == 2) {
              values.categoryType != undefined
                ? (jsonInfo[1].categoryType = "2")
                : "";
              values.categoryIds1 != undefined
                ? (jsonInfo[1].categoryIds = values.categoryIds1)
                : "";
              values.title1 != undefined
                ? (jsonInfo[1].title = values.title1)
                : "";
              values.source1 != undefined
                ? (jsonInfo[1].source = values.source1)
                : "";
              values.link1 != undefined
                ? (jsonInfo[1].link = values.link1)
                : "";
            } else if (checkedValues[i] == 3) {
              values.categoryType != undefined
                ? (jsonInfo[2].categoryType = "3")
                : "";
              values.categoryIds2 != undefined
                ? (jsonInfo[2].categoryIds = values.categoryIds2)
                : "";
              values.title2 != undefined
                ? (jsonInfo[2].title = values.title2)
                : "";
              values.source2 != undefined
                ? (jsonInfo[2].source = values.source2)
                : "";
              values.link2 != undefined
                ? (jsonInfo[2].link = values.link2)
                : "";
            } else if (checkedValues[i] == 4) {
              values.categoryType != undefined
                ? (jsonInfo[3].categoryType = "4")
                : "";
              values.categoryIds3 != undefined
                ? (jsonInfo[3].categoryIds = values.categoryIds3)
                : "";
              values.title3 != undefined
                ? (jsonInfo[3].title = values.title3)
                : "";
              values.source3 != undefined
                ? (jsonInfo[3].source = values.source3)
                : "";
              values.link3 != undefined
                ? (jsonInfo[3].link = values.link3)
                : "";
            } else if (checkedValues[i] == 5) {
              values.categoryType != undefined
                ? (jsonInfo[4].categoryType = "5")
                : "";
              values.categoryIds4 != undefined
                ? (jsonInfo[4].categoryIds = values.categoryIds4)
                : "";
              values.title4 != undefined
                ? (jsonInfo[4].title = values.title4)
                : "";
              values.source4 != undefined
                ? (jsonInfo[4].source = values.source4)
                : "";
              values.link4 != undefined
                ? (jsonInfo[4].link = values.link4)
                : "";
            } else if (checkedValues[i] == 6) {
              values.categoryType != undefined
                ? (jsonInfo[5].categoryType = "6")
                : "";
              values.categoryIds5 != undefined
                ? (jsonInfo[5].categoryIds = values.categoryIds5)
                : "";
              values.title5 != undefined
                ? (jsonInfo[5].title = values.title5)
                : "";
              values.source5 != undefined
                ? (jsonInfo[5].source = values.source6)
                : "";
              values.link5 != undefined
                ? (jsonInfo[5].link = values.link5)
                : "";
            } else if (checkedValues[i] == 7) {
              values.categoryType != undefined
                ? (jsonInfo[6].categoryType = "7")
                : "";
              values.categoryIds6 != undefined
                ? (jsonInfo[6].categoryIds = values.categoryIds6)
                : "";
              values.title6 != undefined
                ? (jsonInfo[6].title = values.title6)
                : "";
              values.source6 != undefined
                ? (jsonInfo[6].source = values.source6)
                : "";
              values.link6 != undefined
                ? (jsonInfo[6].link = values.link6)
                : "";
            }
          }
          var new1Arr = [];
          jsonInfo.forEach((item) => {
            if (item.title != "") {
              new1Arr.push(item);
            }
          });
          jsonInfo = new1Arr;

          jsonInfo.forEach((item) => {
            if (item.categoryIds != "") {
              let a = "";
              item.categoryIds.forEach((item) => {
                a += item + ",";
              });
              item.categoryIds = a;
            }
          });
          console.log(jsonInfo[0].categoryIds);

          aa = JSON.stringify(jsonInfo);
        }

        let param = {};
        param.cityIds = values.cityIds;
        param.industryIds = values.industryIds;
        param.language = values.language;
        param.jsonInfo = aa;
        // console.log(param);
        api.saveManyArticle(param).then((res) => {
          if (res.code == 200) {
            this.$message.success("保存成功");
            console.log(this.visibleDetails);
            this.visibleDetails = false;
            this.getPlan();
          }
        });
      });
    },
    getText(str) {
      return str.replace(/<[^<>]+>/g, "").replace(/&nbsp;/gi, "");
    },
    downloadModel() {
      let path = api.HOST + "/article/downloadModel";
      window.open(path);
    },
    exportToExcel() {
      if (this.selectedRowKeys.length == 0) {
        this.$message.error("请先勾选需要得数据");
      } else {
        let path =
          api.HOST + "/article/exportArticle?ids=" + this.selectedRowKeys;
        window.open(path);
      }
    },
    handleChange(e) {
      let formData = new FormData();
      let inputDOM = e.target.files;
      formData.append("file", inputDOM[0]);
      api.importArticle(formData).then((res) => {
        if ((res.code = 200)) {
          this.$message.success("导入成功");
        }
      });
    },
    //置顶/置底
    setTop(id, top, type) {
      let param = {};
      param.articleId = id;
      if (top == 1) {
        param.top = 0;
      } else {
        param.top = 1;
      }
      param.type = type;
      api.setTop(param).then((res) => {
        if (res.code == 200) {
          this.getPlan();
        }
      });
    },
  },
  created() {
    if (this.param !== undefined && Object.keys(this.param).length <= 6) {
      Object.assign(this.form, this.param);
      this.getPlan();
    } else {
      this.getPlan();
    }
    this.searchLanguageChange();
  },
  components: { quillEditor, quillRedefine },
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
.article-cont {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
/deep/ .ant-upload-list {
  display: none;
}
.a-upload {
  padding: 4px 10px;
  line-height: 24px;
  position: relative;
  cursor: pointer;
  text-align: center;
  color: #fff;
  background: #1890ff;
  border-color: #1890ff;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

.a-upload input {
  position: absolute;
  font-size: 100px;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
}
</style>
